<template>
  <div>
    <vue-ueditor-wrap
      :key="height"
      v-model="content"
      :config="myConfig"
      @beforeInit="addCustomButtom"
      :destroy="true"
    ></vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    height:{
      type:Number,
      default: 200
    }
  },
  data() {
    return {
      myConfig: {
        toolbars: [
          [
            "fontsize",
            "forecolor",
            "bold",
            "test",
            "italic",
            "underline",
            "strikethrough",
            "backcolor",
            "simpleupload",
            // "insertimage",
            "insertvideo",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "insertorderedlist",
            'fullscreen',
            '135editor',
          ]
        ],
        elementPathEnabled: false,
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: this.height,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 自动保存本地
        enableAutoSave: false,
        // 抓取远程图片是否开启,默认true
        catchRemoteImageEnable: false,
        wordCount: false,
        allowDivTransToP: false,
        // 编辑器不自动被内容撑高
        // 执行上传图片的action名称
        imageActionName: "uploadimage",
        // 提交图片的表单名称
        imageFieldName: "file",
        // 上传图片格式
        imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif"],

        catcherActionName: "uploadimage", /* 执行抓取远程图片的action名称 */
        catcherFieldName: "file", /* 提交的图片列表表单名称 */
        catcherPathFormat: "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        catcherUrlPrefix: "", /* 图片访问路径前缀 */
        catcherMaxSize: 5242880, /* 上传大小限制，单位B */
        catcherAllowFiles: [".png", ".jpg", ".jpeg", ".gif",], /* 抓取图片格式显示 */
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: `${process.env.VUE_APP_API_BASE_URL}/common/oss/ueUploadFile`
      },
      content: this.value
    };
  },
  methods: {
    addCustomButtom(editorId) {
      // window.UE.registerUI('135editor',function(editor,uiName){
      //   var editor135;
      //   function onContentFrom135(event) {
      //     if (typeof event.data !== 'string') {
      //       if(event.data.ready) {
      //         editor135.postMessage(editor.getContent(),'*');
      //       }
      //       return;
      //     };
      //
      //     if(event.data.indexOf('<') !== 0) return;
      //
      //     editor.setContent(event.data);
      //     editor.fireEvent("catchRemoteImage");
      //     window.removeEventListener('message', onContentFrom135);
      //   }
      //
      //   var btn = new UE.ui.Button({
      //     name:'btn-dialog-' + uiName,
      //     className:'edui-for-135editor',
      //     title:'打开135编辑器',
      //     onclick:function () {
      //       editor135 = window.open('https://www.135editor.com/simple_editor.html?callback=true&appkey=')
      //       window.removeEventListener('message', onContentFrom135);
      //       window.addEventListener('message', onContentFrom135, false);
      //     }
      //   });
      //   return btn;
      // },editorId);
    }
  },
  watch: {
    value(newValue) {
      this.content = newValue;
    },
    content(newValue) {
      this.$emit("change", newValue);
    },
    height(newValue) {
      this.myConfig.initialFrameHeight = newValue
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{
  background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;

}
</style>
